<template>
  <div class="ticketAddBox">
    <div class="landType" v-if="ticketNav != 3">
      <div
        class="landSvg landSvg1"
        :class="{ selectedSvg: landType == 1 }"
        @click="landTypeChange(1)"
      >
        <svg-icon icon-class="new_mark_point" />
      </div>

      <div
        class="landSvg landSvg2"
        :class="{ selectedSvg: landType == 2 }"
        @click="landTypeChange(2)"
      >
        <svg-icon icon-class="new_mark_line" />
      </div>

      <div
        class="landSvg landSvg3"
        :class="{ selectedSvg: landType == 3 }"
        @click="landTypeChange(3)"
      >
        <svg-icon icon-class="new_mark_polygon" />
      </div>

      <div
        v-if="false"
        class="landSvg landSvg4"
        :class="{ selectedSvg: landType == 4 }"
        @click="landTypeChange(4)"
      >
        <svg-icon icon-class="new_mark_finger" />
      </div>

      <div class="landSvg landSvg5">
        <svg-icon icon-class="new_mark_clear" @click="clearLandShow" />
      </div>
    </div>

    <div class="landTip" id="landTip" v-if="ifClearShow">
      <div class="tipText">已绘制地块将会被清除,是否确认清除?</div>
      <div class="tipButton">
        <div class="tipAffirm" @click="clearLand">是</div>
        <div class="tipCancel" @click="ifClearShow = false">否</div>
      </div>
    </div>

    <!-- 新建列表 -->
    <div class="ticket_add_Header">新建任务</div>
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      class="ticket_add"
      element-loading-background="rgba(80, 80, 80, 0.7)"
      element-loading-text="正在生成航线"
      v-if="ticketNav != 3"
    >
      <div class="ticket_title_content">巡检地块</div>
      <div class="ticket_add_body airLineLand">
        <el-form-item label="离地限高120m:" v-if="false">
          <div class="airlineHeight">
            <el-switch
              size="small"
              :value="formData.isBelow120Flag"
              @input="height120Change"
              active-color="#18abf3"
              inactive-color="#eaecf0"
            ></el-switch>
            <el-tooltip
              class="item"
              effect="light"
              placement="top-start"
              :open-delay="300"
            >
              <svg-icon icon-class="new_tips"></svg-icon>
              <div slot="content" class="height_tip">
                离地限高120米,是指飞行离地真实高度不得超过120米。关闭该项,离地限高将提升至200米,信号覆盖范围、可拍摄区域越大
              </div>
            </el-tooltip>
          </div>
        </el-form-item>

        <el-form-item label="名称:" prop="plot_name">
          <el-input
            class="plotNameInput"
            type="text"
            size="mini"
            v-model="formData.plot_name"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item
          :label="radiusLabel + ':'"
          class="contentOverFlow"
          v-if="landType != 3"
        >
          <el-slider
            v-model="formData.radius"
            :show-input="true"
            :show-input-controls="false"
            input-size="mini"
            :min="radiusMin"
            :max="radiusMax"
            @change="landBufferChange(true)"
          >
          </el-slider>
          <span class="contentText"> m </span>
        </el-form-item>
      </div>

      <div class="ticket_title_content">巡检用途</div>
      <div class="ticket_add_body airLineUse">
        <el-form-item label="巡检类型:" prop="aim">
          <el-select size="mini" v-model="formData.aim">
            <el-option
              v-for="(item, index) in aimOption"
              :key="index"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
          <!-- <el-input size="mini" v-model="formData.aim"></el-input> -->
        </el-form-item>

        <el-form-item label="飞行排期:" prop="aim">
          <el-switch
            v-model="formData.ifRightNow"
            active-text="立即"
            :active-value="1"
            inactive-text="其他"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>

        <template v-if="!formData.ifRightNow">
          <el-form-item label="重复频率:" required>
            <el-select
              size="mini"
              v-model="formData2.repeatFrequency"
              @input="repeatFrequencyChange"
            >
              <el-option
                v-for="item in repeatOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="repeatFrequencyOptionDisabled(item)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="巡检时段:" required>
            <el-select
              v-model="formData2.fly_period"
              size="mini"
              @input="flyPeriodChange"
              :disabled="
                formData2.repeatFrequency == 2 &&
                (formData.aim == 5 || formData.aim == 6)
              "
            >
              <el-option
                v-for="item in flyPeriodOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
                :disabled="flyPeriodOptionDisabled(item)"
              >
              </el-option
            ></el-select>
          </el-form-item>

          <el-tooltip
            class="item"
            effect="dark"
            placement="left"
            popper-class="timeTipTooltip"
            :open-delay="300"
          >
            <div slot="content">
              <div>
                {{ repeatFrequencyTip }}
              </div>
              <div>
                {{ flyPeriodTip }}
              </div>
            </div>
            <div class="timeTip hidden_line">
              {{ repeatFrequencyTip }} {{ flyPeriodTip }}
            </div>
          </el-tooltip>
          <el-form-item label="开始日期:" required>
            <el-date-picker
              v-model="formData2.start_date"
              size="mini"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="startDatePicker"
              :clearable="false"
              @change="startDateChange"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="终止日期:" required>
            <el-date-picker
              v-model="formData2.end_day"
              size="mini"
              type="date"
              placeholder="终止日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              :picker-options="endDayPicker"
              :clearable="false"
              @change="endDateChange"
            >
            </el-date-picker>
          </el-form-item>
        </template>

        <el-form-item label="备注:">
          <el-input
            class="textareaOverflow"
            type="textarea"
            size="mini"
            v-model="formData.description"
            autosize
            resize="none"
            show-word-limit
            maxlength="200"
          ></el-input>
        </el-form-item>
      </div>

      <div
        class="ticket_title_content"
        v-if="formData.aim == 1 || formData.aim == 7"
      >
        场景设置
      </div>
      <div
        class="ticket_add_body secneSetting"
        v-if="formData.aim == 1 || formData.aim == 7"
      >
        <el-form-item label="变化检测:">
          <el-switch
            v-model="sceneSwitch1"
            :disabled="sceneSwitch2 || sceneSwitch3"
          ></el-switch>
        </el-form-item>
        <el-form-item label="实时识别:">
          <el-switch
            v-model="sceneSwitch2"
            :disabled="sceneSwitch1"
          ></el-switch>
        </el-form-item>
        <template v-if="sceneSwitch2">
          <el-radio-group
            v-model="sceneRadio"
            :disabled="formData.aim != 1 && formData.aim != 2"
          >
            <el-radio :label="1" @click.native.prevent="aiFlagChange(1)">
              人
            </el-radio>
            <el-radio :label="2" @click.native.prevent="aiFlagChange(2)">
              车
            </el-radio>
            <el-radio :label="3" @click.native.prevent="aiFlagChange(3)">
              烟火
            </el-radio>
          </el-radio-group>
        </template>
      </div>
    </el-form>

    <el-form class="ticket_show" v-if="ticketNav == 3">
      <div class="ticket_title_content">新建任务详情</div>
      <el-form-item label="任务名称:">
        {{ formData.plot_name || "--" }}
      </el-form-item>
      <el-form-item label="巡检类型:">
        {{ formData.aim | aimFilter }}
      </el-form-item>
      <el-form-item label="飞行排期:">
        {{
          repeatFrequencyTip
            ? repeatFrequencyTip
            : formData2.start_date.split(" ")[0]
        }},{{ flyPeriodTip }}
      </el-form-item>
      <el-form-item label="场景设置:">
        <div v-for="(text, index) in AIFlagText" :key="index">
          {{ text }}
        </div>
      </el-form-item>
      <el-form-item label="备注:">
        {{ formData.description || "--" }}
      </el-form-item>
      <div class="airlineNest">
        <div class="airlineNestInfo">
          <div class="airlineTitle">执行机场</div>
          <div class="airlineText">
            <div v-if="airlineList.length > 1 || true">
              <el-select
                v-model="airlineSelect"
                value-key="init_key"
                @change="airlineSelectChange"
                size="mini"
              >
                <el-option
                  v-for="line in airlineList"
                  :key="line.init_key"
                  :label="line.nest.nest_name"
                  :value="line"
                ></el-option>
              </el-select>
            </div>
            <div v-else>{{ airlineNest.nest_name }}</div>
          </div>
        </div>
        <div class="airlineInfo">
          <div class="airlineContent">
            <div class="airlineTitle">航线条数</div>
            <div class="airlineText">{{ airlines.length }}条</div>
          </div>
          <div class="airlineContent">
            <div class="airlineTitle">预计总飞行时间</div>
            <div class="airlineText">
              {{ airlineSelect.predict__total_time | totalTimeFilter }}
              分钟(不含充电)
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 底部按钮 -->
    <div class="ticket_add_footer">
      <div class="buttonCancel">
        <el-button @click="ticketCancel" size="mini" v-if="ticketNav != 3">
          取消
        </el-button>
        <el-button @click="landBack" size="mini" v-if="ticketNav == 3">
          上一步
        </el-button>
      </div>
      <div class="buttonSubmit">
        <el-button
          type="primary"
          @click="nextLand"
          size="mini"
          v-if="ticketNav != 3"
        >
          下一步
        </el-button>
        <el-button
          type="primary"
          @click="ticketSubmit"
          size="mini"
          v-if="ticketNav == 3"
          :disabled="airlineList.length === 0"
        >
          提交任务
        </el-button>
      </div>
    </div>

    <el-dialog
      v-if="dialogHeightVisible"
      :visible.sync="dialogHeightVisible"
      width="20%"
      :before-close="dialogHeightClose"
      :append-to-body="true"
      :show-close="false"
      class="dialog_height"
    >
      <div slot="title" class="height_dialog_title">风险提醒！</div>
      <div class="height_dialog_text">
        未经报备审批在管控区域飞行、适飞区域高度超过120米、或未联网飞行无人机的行为,都将被认定为"黑飞",黑飞即将会产生罚单。具体可查看无人机相关管理条例
      </div>
      <div class="height_dialog_tip" @click="openRegulations">
        《无人驾驶航空飞行管理暂行条例》
      </div>
      <div class="height_dialog_button">
        <el-button type="text" @click="dialogHeightClose(1)">
          已知晓,仍要创建
        </el-button>
      </div>
      <div class="height_dialog_button">
        <el-button type="text" @click="dialogHeightClose(0)">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="dialogRegulationsShow"
      :visible.sync="dialogRegulationsShow"
      width="40%"
      :before-close="closeRegulations"
      :append-to-body="true"
      :show-close="true"
    >
      <RegulationsText></RegulationsText>
    </el-dialog>

    <!-- 自定义时间 -->
    <el-dialog
      title="自定义时间"
      :visible.sync="flyPeriodDialogShow"
      width="400px"
      :before-close="flyPeriodDialogClose"
      class="flyPeriodDialog"
      :append-to-body="true"
    >
      <div class="flyPeriodDialogBody">
        <div class="bodyTip">
          提示:实际起飞时间根据情况可能有半小时左右的误差
        </div>
        <div class="bodyTime">
          <div class="timeContent">
            <el-select size="mini" v-model="flyTime1" @change="flyTime1Change">
              <el-option
                v-for="item in defineTimeOption"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
            时
          </div>
          <div class="timeContent">
            <el-select size="mini" v-model="flyTime2">
              <el-option
                v-for="item in flyTime1 == 23 ? 51 : 60"
                :key="item - 1"
                :value="item - 1"
              ></el-option>
            </el-select>
            分
          </div>
          <div class="flyPeriodDialogTip" v-if="false">
            ! 所选时间与当前排期有冲突,可选这当日内尝试补飞
          </div>
        </div>
        <div class="flyPeriodDialogCheck">
          <el-checkbox v-model="reschedule" :true-label="1" :false-label="0">
            接受当日补飞
          </el-checkbox>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" size="mini" @click="flyPeriodDialogSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 自定义频率 -->
    <el-dialog
      title="自定义频率"
      :visible.sync="scheduleTypeDialogShow"
      width="400px"
      :before-close="scheduleTypeDialogClose"
      class="scheduleTypeDialog"
      :append-to-body="true"
    >
      <div class="scheduleTypeDialogBody">
        <div class="header">
          <div class="title">重复频率</div>
          <div class="content">
            <div class="text">每</div>

            <div class="number">
              <el-input-number
                v-model="repeat_cycle_interval"
                controls-position="right"
                :min="repeatDialogMin"
                :max="repeatDialogMax"
                size="mini"
              />
            </div>
            <div class="select">
              <el-select
                v-model="repeatDialogSelect"
                placeholder="请选择"
                size="mini"
                @change="repeatDialogSelectChange"
              >
                <el-option
                  v-for="item in repeatDialogSelectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="scheduleNum">
              执行
              <span class="number">{{ scheduleNumMethod() }}</span> 次
            </div>
          </div>
        </div>
        <div class="body">
          <div v-if="repeatDialogSelect === 'WEEK'" class="week">
            <div
              v-for="(item, index) in 7"
              :key="index"
              class="day"
              :class="{
                selectDay: repeatDialogWeekSelectList.includes(item),
              }"
              @click="repeatDialogWeekSelect(item)"
            >
              {{ ["一", "二", "三", "四", "五", "六", "日"][index] }}
            </div>
          </div>

          <div v-else-if="repeatDialogSelect === 'MONTH'" class="month">
            <div
              v-for="(item, index) in 31"
              :key="index"
              class="day"
              :class="{
                selectDay: repeatDialogMonthSelectList.includes(item),
              }"
              @click="repeatDialogMonthSelect(item)"
            >
              {{ item }}
            </div>
          </div>

          <div class="bodyTips" v-if="repeatDialogSelect != 'DAY'">
            注:优先执行日期
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="scheduleTypeDialogClose">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="scheduleTypeDialogSubmit">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 最低高度 -->
    <UIDialog
      v-if="demDialogVisible"
      @dialogClose="demDialogClose"
      class="demDialog"
      :dialogHeight="demDialogHeight"
    >
      <div slot="body" class="demDialogBody">
        <div class="demSvgBox">
          <svg-icon icon-class="work_warning"></svg-icon>
        </div>
        <div class="demDialogContent">
          <div class="bodyContentTitle">警告:无安全高度数据</div>
          <div class="bodyContentText">
            当前区域缺乏三维底座和制高点数据支持，飞行安全风险升级。强行起飞需自行设置安全高度，责任自负。
            <span class="textSetting" @click="demDialogHeightChange">设置</span>
          </div>
          <div class="bodyContentHeight" v-if="demHeightVisible">
            <span class="heightTitle"> 安全飞行高度 </span>
            <el-tooltip placement="top" :open-delay="300">
              <svg-icon icon-class="work_i"></svg-icon>
              <div slot="content" style="width: 220px">
                <div>指无人机与地表的垂直高度;</div>
              </div>
            </el-tooltip>
            <div class="heightInput">
              <el-input
                placeholder="高度不低于80m"
                v-model="minDemAbove"
                type="number"
              ></el-input>
              <div class="heightInputText">m</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="demDialogFooter">
        <el-button class="demButtonClean" @click="demDialogClose"
          >取消</el-button
        >
        <el-button
          class="demButtonSubmit"
          v-if="demHeightVisible"
          @click="demDialogSubmit"
          >确认</el-button
        >
      </div>
    </UIDialog>
  </div>
</template>

<script>
import moment from "moment";

import RegulationsText from "./regulationsText.vue";
import UIDialog from "@/components/UIDialog";

var drawLayer = null; // 绘制图层
var ticketMoveLayer = null; // 移动图层

var landLayer = null; // 地块图层
var bufferLayer = null; // 线缓冲图层
var editLayer = null; // 编辑图层

var addAirlineLayer = null; // 航线图层
var addAirlineLandLayer = null; // 航线地块图层

var pointsId = [];
var centerPointsId = [];
var editPoint = null; // 编辑点

var drawHandler = null; // 事件

var movePosition = [];
var movePosition2D = []; // 移动位置经纬度参数
var movePosition3D = []; // 移动位置3D坐标参数

var drawLineEntity = null;
var drawPolygonEntity = null;

var position2DList = []; // 经纬度组
var position3DList = []; // 3D坐标组

import {
  initAirline,
  submitTicket,
  getPeriodTime,
  ticketResubmit,
  getPlotAddress,
} from "@/api/view5";

export default {
  name: "ticketAdd",
  props: {
    userAuthor: {
      default() {
        return null;
      },
    },
    nestList: {
      default() {
        return [];
      },
    },
    // 是否再次提交
    ifAddAgain: {
      default() {
        return false;
      },
    },
  },
  filters: {
    totalTimeFilter(time) {
      if (!time) {
        return "--";
      }
      return (time / 60).toFixed(1);
    },

    aimFilter(aim) {
      switch (aim) {
        case "1":
          return "拍照";
        case "2":
          return "直播";
        case "3":
          return "全覆盖";
        case "4":
          return "全景";
        case "5":
          return "正射";
        case "6":
          return "三维";
        case "7":
          return "视频";

        default:
          return "特殊情况";
      }
    },
  },
  components: { RegulationsText, UIDialog },

  computed: {
    AIFlagText() {
      switch (+this.formData.ai_flag) {
        case 1:
          return ["实时识别（人）"];
        case 2:
          return ["实时识别（车）"];
        case 3:
          return ["实时识别（烟火）"];
        case 4:
          return ["变化检测"];
        case 5:
          return ["低空飞行"];
        case 6:
          return ["实时识别（人）", "低空飞行"];
        case 7:
          return ["实时识别（车）", "低空飞行"];
        case 8:
          return ["实时识别（烟火）", "低空飞行"];
        default:
          return ["--"];
      }
    },
  },
  data() {
    let that = this;
    return {
      dialogRegulationsShow: false, // 条例弹框

      radiusMin: 50, // 半径最小值
      radiusMax: 100, // 半径最大值

      ifClearShow: false, // 显示是否清空

      ticketNav: 0, // 任务进度 1-绘制 2-生成 3-提交
      ifDraw: false, // 绘制状态
      ifEditing: false, // 编辑状态

      dialogHeightVisible: false, // 限高通知弹框

      centerPoint: [], // 中心点
      lineLength: "", // 航线长度

      radiusLabel: "半径",

      landType: 0, // 地块类型 1-点 2-线 3-面 4-移动 5-清除
      formData: {
        plot_name: "",
        radius: 50,
        aim: 1,
        ifRightNow: 1,
        description: "",
        isBelow120Flag: true,
        district: "",
        ai_flag: 0,
      },

      aimOption: [
        {
          value: 1,
          label: "拍照",
        },
        // {
        //   value: 2,
        //   label: "直播",
        // },
        {
          value: 7,
          label: "视频",
        },
        // {
        //   value: 3,
        //   label: "全覆盖",
        // },
        {
          value: 4,
          label: "全景",
        },
        {
          value: 5,
          label: "正射",
        },
        {
          value: 6,
          label: "三维",
        },
      ],

      formRules: {
        plot_name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入名称",
          },
        ],
        aim: [
          {
            required: true,
            trigger: "change",
            message: "请选择航线用",
          },
        ],
      },
      ifSchedule: false, // 判断排期变更
      ifScene: false, // 判断场景设置

      formData2: {
        repeatFrequency: 1, // 重复频率
        fly_period: 1, // 巡检时段
        start_date: moment().startOf("day").format("YYYY-MM-DD"), // 开始日期
        end_day: moment().startOf("day").format("YYYY-MM-DD"), // 终止日期
      },
      repeat_frequency: "NO_REPEAT", //  重复频率
      repeat_cycle_interval: 1, // 重复值
      repeat_cycle: "", // 重复执行的频率
      repeat_day: [],

      repeatFrequencyLabel: "", // 重复频率显示文字
      lastRepeatFrequencyData: 1, // 自定义之前重复的值
      lastFlyPeriodData: 1, // 自定义之前的数据
      flyPeriodTip: "", // 巡检时段备注提示

      sceneSwitch1: false, // 变化检测
      sceneSwitch2: false, // 实时识别
      sceneRadio: 0, // 实时识别 1-人 2-车 3-烟火
      sceneSwitch3: false, // 低空飞行

      // 自定义时间
      flyPeriodDialogShow: false,

      // 自定义频率
      scheduleTypeDialogShow: false,

      repeatDialogMin: 1, // 重复值最小值
      repeatDialogMax: 90, // 重复值最大值
      // 重复弹框下拉选项
      repeatDialogSelect: "DAY",
      repeatDialogSelectOption: [
        { value: "DAY", label: "天" },
        { value: "WEEK", label: "周" },
        { value: "MONTH", label: "月" },
      ],
      repeatDialogWeekDay: 0, // 周 今天换周
      repeatDialogWeekSelectList: [], // 周选中 列表

      repeatDialogMonthDay: 1, // 月 今日换日期
      repeatDialogMonthSelectList: [], // 月选中 列表
      repeatFrequencyTip: "", // 排期类型备注提示

      minDemAbove: 0, // 最低高度
      demDialogHeight: 204,
      demDialogVisible: false,
      demHeightVisible: false,

      flyTime1: 9,
      flyTime2: 0,
      reschedule: 0,

      // * 重复频率列表
      repeatOption: [
        {
          value: 1,
          label: "不重复",
        },
        {
          value: 2,
          label: "连续执行",
        },
        {
          value: 3,
          label: "每天一次",
        },
        {
          value: 4,
          label: "每周一次",
        },
        {
          value: 5,
          label: "每月一次",
        },
        // {
        //   value: 6,
        //   label: "每个非工作日重复",
        // },
        {
          value: 7,
          label: "自定义频率",
        },
      ],
      // 巡检时段
      flyPeriodOption: [
        {
          key: 999,
          value: "自定义时间",
        },
      ],
      // 自定义时间
      defineTimeOption: [],

      // 开始日期参数
      startDatePicker: {
        disabledDate: (time) => {
          return (
            time < moment().startOf("day") ||
            time > moment().add(30, "day").startOf("day")
          );
        },
      },
      // 终止日期参数
      endDayPicker: {
        disabledDate: (time) => {
          return (
            time < moment(that.formData2.start_date).startOf("day") ||
            time >
              moment(that.formData2.start_date).add(180, "day").startOf("day")
          );
        },
        shortcuts: [
          {
            text: "持续30天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(30, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
          {
            text: "持续60天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(60, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
          {
            text: "持续90天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(90, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
          {
            text: "持续120天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(120, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
          {
            text: "持续150天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(150, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
          {
            text: "持续180天",
            onClick(picker) {
              picker.$emit(
                "pick",
                moment(that.formData2.start_date)
                  .add(180, "day")
                  .format("YYYY-MM-DD")
              );
            },
          },
        ],
      },

      // 地图传参
      mapPointValue: "", // 定位

      // 航线列表
      airlineList: [], // 航线列表
      airlineSelect: {}, // 选中航线
      initKey: "", // 初始化任务key
      airlines: [], // 生成的航线
      airlineNest: {}, // 航线机巢
      airlineNestCode: "", // 航线机巢
    };
  },
  mounted() {
    this.initData();
    this.initBus();
  },
  methods: {
    initData() {
      drawLayer = CesiumUtil.CreateLayer("drawLayer");
      ticketMoveLayer = CesiumUtil.CreateLayer("ticketMoveLayer");
      landLayer = CesiumUtil.CreateLayer("landLayer");
      bufferLayer = CesiumUtil.CreateLayer("bufferLayer");
      editLayer = CesiumUtil.CreateLayer("editLayer");
      addAirlineLayer = CesiumUtil.CreateLayer("addAirlineLayer");
      addAirlineLandLayer = CesiumUtil.CreateLayer("addAirlineLayer");

      getPeriodTime().then((res) => {
        if (res.error_code == 0) {
          this.defineTimeOption = res.data.define_time;
          this.flyPeriodOption = res.data.period;
          this.flyPeriodTip = res.data.period[0].value;
          this.flyPeriodOption.push({
            key: 999,
            value: "自定义时间",
          });
        }
      });

      if (this.ifAddAgain) {
        ticketResubmit({ ticket_id: this.$parent.ticketInfoData.id }).then(
          (res) => {
            if (res.error_code == 0) {
              this.addAgain(res.data);
            } else {
              this.$message.warning(res.msg);
            }
          }
        );
      } else {
        this.landTypeChange(1);
      }
    },
    initBus() {
      let that = this;
    },
    // * 限高120米开关
    height120Change(val) {
      if (val) {
        this.formData.isBelow120Flag = true;
        this.$emit("initSignalPoly", 120);
        this.clearLand();
      } else {
        this.dialogHeightVisible = true;
      }
    },
    // * 限高120M 弹框 关闭
    dialogHeightClose(flag) {
      if (flag) {
        this.$emit("initSignalPoly", 200);
        this.formData.isBelow120Flag = false;
        this.clearLand();
      }
      this.dialogHeightVisible = false;
    },

    // 任务进度
    ticketNavChange(nav) {
      this.ticketNav = nav;
      switch (nav) {
        case 1:
          this.clearLand();
          this.drawTicketLand(this);
          break;
        case 2:
          drawLayer?.entities.removeAll();
          addAirlineLandLayer?.entities.removeAll();
          drawLineEntity = null;
          drawPolygonEntity = null;

          this.editTicketLand(this);
          break;
        case 3:
          editLayer?.entities.removeAll();
          bufferLayer?.entities.removeAll();
          landLayer?.entities.removeAll();
          this.airlineSelectChange(this.airlineList[0]);
          break;

        default:
          break;
      }
    },
    // 地块 类型变化
    landTypeChange(type) {
      if (this.$parent.listLoading) {
        this.$message.warning("请等待上一条航线");
        return;
      }
      this.landType = type;
      switch (type) {
        case 1:
          this.formData.aim = 1;

          this.radiusLabel = "半径";
          this.radiusMin = 50;
          this.radiusMax = 100;
          this.formData.radius = 50;
          break;
        case 2:
          this.formData.aim = 5;

          this.radiusLabel = "宽度";
          this.radiusMin = 50;
          this.radiusMax = 100;
          this.formData.radius = 50;
          break;
        case 3:
          this.formData.aim = 1;

          break;

        default:
          break;
      }

      this.clearLand();
      this.clearAirline();
      this.ifDraw = true;
      // this.initialize();
      if (!this.ifAddAgain) {
        this.drawTicketLand(this);
      }
    },
    // 清除地块显示
    clearLandShow() {
      if (position2DList.length == 0) {
        return;
      }
      this.ifClearShow = true;
      this.$nextTick(() => {
        let selectTip = document.querySelector("#landTip");
        let selectSvg = document.querySelector(".landSvg5");
        selectTip.style.top = selectSvg.offsetTop + 30 + "px";
      });
    },
    // 清除图层
    clearLand() {
      console.log("清除图层");
      this.ifClearShow = false;
      position2DList = [];
      position3DList = [];
      drawLayer?.entities.removeAll();
      ticketMoveLayer?.entities.removeAll();

      landLayer?.entities.removeAll();
      bufferLayer?.entities.removeAll();

      editLayer?.entities.removeAll();

      addAirlineLayer?.entities.removeAll();
      addAirlineLandLayer?.entities.removeAll();
    },
    // 清除航线
    clearAirline() {
      this.airlineList = [];
      // airlineMapLayer?.entities.removeAll();
    },

    // 移除所有监听
    removeAllAction() {
      if (drawHandler) {
        drawHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        drawHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        drawHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
        drawHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
        drawHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        drawHandler = null;
      }
    },
    // 绘制地块
    drawTicketLand(comp) {
      this.removeAllAction();

      drawLineEntity = null;
      drawPolygonEntity = null;

      drawHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      // 鼠标移动事件
      drawHandler.setInputAction((event) => {
        // console.log(event);
        // 除第一次，每次移动都会删除上次的点实体

        if (!comp.ifDraw) {
          return;
        }

        ticketMoveLayer?.entities.removeAll();

        let point2D = CesiumUtil.cartesian2ToLatLng(event.endPosition);
        let point3D = CesiumUtil.cartesian2ToCartesian3(event.endPosition);

        let movePointOption = {};
        movePosition2D = point2D;
        movePosition3D = point3D;

        movePointOption = {
          name: "移动点",
          type: "movePoint",
        };
        CesiumUtil.drawPoint(point3D, ticketMoveLayer, movePointOption);
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 左键点击
      drawHandler.setInputAction((event) => {
        if (!comp.ifDraw) {
          return;
        }
        let position2D = CesiumUtil.cartesian2ToLatLng(event.position);
        let position3D = CesiumUtil.cartesian2ToCartesian3(event.position);

        let pointOption = {};
        let ellipseOption = {};
        let lineOption = {};
        let polygonOption = {};
        position2DList.push(position2D);
        position3DList.push(position3D);

        console.log("position3DList", position3DList);
        switch (comp.landType) {
          case 1:
            // 点
            comp.drawEndLand();
            break;
          case 2:
            if (!drawLineEntity) {
              // 线
              lineOption = { name: "线地块", type: "drawLine" };
              drawLineEntity = CesiumUtil.drawPolyline(
                new Cesium.CallbackProperty(function () {
                  return position3DList.concat(movePosition3D);
                }, false),
                drawLayer,
                lineOption
              );
            }
            break;
          case 3:
            // 面
            if (!drawPolygonEntity) {
              polygonOption = {
                name: "面地块",
                type: "drawPolygon",
                color: "#0000FF",
              };
              drawPolygonEntity = CesiumUtil.drawPolygon(
                new Cesium.CallbackProperty(function () {
                  return new Cesium.PolygonHierarchy(
                    position3DList.concat(movePosition3D)
                  );
                }, false),
                drawLayer,
                polygonOption
              );
            }

            if (!drawLineEntity) {
              // 添加绘制的线实体
              lineOption = {
                name: "面地块线",
                type: "drawLine",
              };

              drawLineEntity = CesiumUtil.drawPolyline(
                new Cesium.CallbackProperty(function () {
                  return position3DList
                    .concat(movePosition3D)
                    .concat([position3DList[0]]);
                }, false),
                drawLayer,
                lineOption
              );
            }

            break;

          default:
            break;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 右键点击操作
      drawHandler.setInputAction((event) => {
        if (!comp.ifDraw) {
          return;
        }

        switch (comp.landType) {
          case 1:
            // 点
            break;
          case 2:
            // 线
            if (position3DList.length < 2) {
              comp.$message.warning("至少绘制2个点");
              return;
            }
            comp.drawEndLand();
            break;
          case 3:
            // 面
            if (position3DList.length < 3) {
              comp.$message.warning("至少选择3个点");
              return;
            }
            comp.drawEndLand();
            break;

          default:
            break;
        }
        if (comp.landType != 1) {
          drawLayer?.entities.removeAll();
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    // 地块绘制完成
    drawEndLand() {
      let that = this;
      if (!position2DList || position2DList?.length == 0) {
        // that.$message.warning("请绘制地块");
        return;
      }

      drawLayer?.entities.removeAll();
      ticketMoveLayer?.entities.removeAll();
      landLayer?.entities.removeAll();
      addAirlineLayer?.entities.removeAll();

      let pointOption = {};
      let ellipseOption = {};
      let lineOption = {};
      let polygonOption = {};
      let centerPoint = null;
      switch (that.landType) {
        case 1:
          // 点
          this.centerPoint = position2DList[0];
          break;
        case 2:
          // 线
          lineOption = { name: "线地块", type: "drawLine" };
          CesiumUtil.drawPolyline(
            new Cesium.CallbackProperty(function () {
              return position3DList;
            }, false),
            landLayer,
            lineOption
          );

          centerPoint = turf.center(turf.points(position2DList));
          this.centerPoint = centerPoint.geometry.coordinates;
          break;
        case 3:
          // 面
          lineOption = { name: "面地块线", type: "drawLine" };
          CesiumUtil.drawPolyline(
            new Cesium.CallbackProperty(function () {
              return position3DList.concat(position3DList[0]);
            }, false),
            landLayer,
            lineOption
          );

          polygonOption = {
            name: "面地块",
            type: "drawPolygon",
            color: "#0000FF",
          };
          CesiumUtil.drawPolygon(
            new Cesium.CallbackProperty(function () {
              return new Cesium.PolygonHierarchy(position3DList);
            }, false),
            landLayer,
            polygonOption
          );

          centerPoint = turf.center(turf.points(position2DList));
          this.centerPoint = centerPoint.geometry.coordinates;
          break;

        default:
          break;
      }

      console.log("centerPoint", this.centerPoint);
      getPlotAddress({
        lng: this.centerPoint[0],
        lat: this.centerPoint[1],
      }).then((res) => {
        if (res.error_code == 0) {
          this.formData.plot_name = res.data.address.slice(0, 20);
        } else {
          this.$message.warning(res.msg);
        }
      });

      that.landBufferChange();
      that.ifDraw = false;
      that.ticketNavChange(2);
    },
    // 地块外扩变化
    landBufferChange(ifRadius) {
      let that = this;

      let pointOption = {};
      let ellipseOption = {};
      let lineOption = {};
      let polygonOption = {};

      let radius = that.formData.radius;

      bufferLayer?.entities.removeAll();
      switch (that.landType) {
        case 1:
          // 点
          pointOption = {
            name: "地块点1",
            type: "drawPointCenter",
          };
          CesiumUtil.drawPoint(position3DList[0], bufferLayer, pointOption);
          if (position2DList.length == 1) {
            let elsePoint = turf.rhumbDestination(
              position2DList[0],
              radius,
              90,
              {
                units: "meters",
              }
            );
            position2DList[1] = elsePoint.geometry.coordinates;
            let elsePoint3D = Cesium.Cartesian3.fromDegreesArray(
              position2DList[1]
            );
            position3DList[1] = elsePoint3D[0];
          } else {
            if (!ifRadius) {
              radius = turf.length(turf.lineString(position2DList), {
                units: "meters",
              });
            }
            if (radius > that.radiusMax || radius < that.radiusMin) {
              if (radius > that.radiusMax) {
                radius = that.radiusMax;
              } else if (radius < that.radiusMin) {
                radius = that.radiusMin;
              }
            }
            let point1 = turf.point(position2DList[0]);
            let point2 = turf.point(position2DList[1]);
            let bearing = turf.bearing(point1, point2);
            let newPoint2 = turf.rhumbDestination(point1, radius, bearing, {
              units: "meters",
            });
            position2DList[1] = newPoint2.geometry.coordinates;
            position3DList[1] = Cesium.Cartesian3.fromDegreesArray(
              position2DList[1]
            )[0];
          }
          that.formData.radius = radius;
          let pointOption2 = {
            name: "地块点2",
            type: "drawPoint",
          };
          CesiumUtil.drawPoint(position3DList[1], bufferLayer, pointOption2);

          ellipseOption = {
            name: "地块点圆",
            type: "drawEllipse",
            radius: radius,
            color: "#00ffff",
          };
          CesiumUtil.drawEllipse(position3DList[0], bufferLayer, ellipseOption);

          lineOption = { name: "地块点线", type: "drawLine" };
          CesiumUtil.drawPolyline(
            new Cesium.CallbackProperty(function () {
              return position3DList;
            }, false),
            bufferLayer,
            lineOption
          );
          break;
        case 2:
          // 线
          position2DList.forEach((point, index) => {
            if (index === position2DList.length - 1) {
              return;
            } else {
              CesiumUtil.drawLineBuffer(
                [point, position2DList[index + 1]],
                radius,
                bufferLayer
              );
            }
          });
          break;
        case 3:
          // 面
          break;

        default:
          break;
      }
    },
    // 编辑地块
    editTicketLand(comp) {
      this.removeAllAction();
      drawHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      editLayer?.entities.removeAll();

      if (comp.landType != 1) {
        comp.createEditVertex();
        comp.createMidVertex();
      }

      // 鼠标移动事件
      drawHandler.setInputAction((event) => {
        // console.log(event);
        // 除第一次，每次移动都会删除上次的点实体
        // 获取屏幕坐标，移动监听与点击有所不同，所以有起始位置和终点位置
        const windowPosition = event.startPosition;
        // 将屏幕坐标转为笛卡尔坐标
        const ellipsoid = viewer.scene.globe.ellipsoid;
        const cartesian = viewer.camera.pickEllipsoid(
          windowPosition,
          ellipsoid
        );
        if (!cartesian) {
          return;
        }
        if (comp.ifEditing) {
          ticketMoveLayer?.entities.removeAll();
          let point2D = CesiumUtil.cartesian2ToLatLng(event.endPosition);
          let point3D = CesiumUtil.cartesian2ToCartesian3(event.endPosition);
          let points2D = [];
          let points3D = [];
          if (!editPoint) {
            return;
          }
          // 编辑
          // console.log("editMove", point2D, point3D);
          let objType = editPoint.type;
          if (comp.landType == 1) {
            // 点
            editPoint.position = point3D;
            if (objType == "drawPointCenter") {
              position3DList[0] = point3D;
              position2DList[0] = CesiumUtil.cartesian3ToLatLng(point3D);
            } else if (objType == "drawPoint") {
              position3DList[1] = point3D;
              position2DList[1] = CesiumUtil.cartesian3ToLatLng(point3D);
            } else {
              console.log("其他Type", objType);
            }
          } else {
            editPoint.position = point3D;

            for (let id of pointsId) {
              let newPoint = editLayer.entities.getById(id).position._value;
              points3D.push(newPoint);
              points2D.push(CesiumUtil.cartesian3ToLatLng(newPoint));
            }
            position3DList = points3D;
            position2DList = points2D;
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 左键按下
      drawHandler.setInputAction((event) => {
        // 编辑
        var obj = viewer.scene.pick(event.position);
        if (!obj?.id?.type) {
          return;
        }
        let objType = obj.id.type;

        let typeList = ["EditMidVertex"];
        if (!typeList.includes(objType)) {
          return;
        }

        // 改变鼠标状态
        if (objType == "EditMidVertex") {
          position3DList.splice(
            obj.id.vertexIndex + 1,
            0,
            obj.id.position._value
          );

          position2DList = [];
          position3DList.forEach((point) => {
            const newPoint = CesiumUtil.cartesian3ToLatLng(point);
            position2DList.push(newPoint);
          });
          comp.clearAllEditVertex();
          comp.createEditVertex();
          comp.createMidVertex();
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 左键按下
      drawHandler.setInputAction((event) => {
        // 编辑
        console.log("leftDown", event);
        var obj = viewer.scene.pick(event.position);
        console.log("obj1129", obj);
        if (!obj?.id?.type) {
          return;
        }
        let objType = obj.id.type;

        let typeList = ["drawPointCenter", "drawPoint", "EditVertex"];
        if (!typeList.includes(objType)) {
          return;
        }

        viewer.scene.screenSpaceCameraController.enableRotate = false;
        // 改变鼠标状态
        viewer.enableCursorStyle = false;
        viewer._element.style.cursor = "";
        document.body.style.cursor = "move";
        editPoint = obj.id;
        comp.ifEditing = true;

        if (objType == "drawPointCenter") {
        } else if (objType == "drawPoint") {
        } else if (objType == "EditVertex") {
          comp.clearMidVertex();
        } else {
          console.log("其他Type", objType);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      // 左键抬起
      drawHandler.setInputAction((event) => {
        console.log("左键抬起", comp.ifEditing);
        if (comp.ifEditing) {
          console.log("进抬起");
          viewer.enableCursorStyle = true;
          document.body.style.cursor = "default";
          viewer.scene.screenSpaceCameraController.enableRotate = true;
          comp.ifEditing = false;
          comp.landBufferChange();
          if (comp.landType != 1) {
            comp.clearAllEditVertex();
            comp.createEditVertex();
            comp.createMidVertex();
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_UP);

      // 右键点击
      drawHandler.setInputAction((event) => {
        console.log("左键抬起", comp.ifEditing);
        var obj = viewer.scene.pick(event.position);
        console.log("obj1129", obj);
        if (!obj?.id?.type) {
          return;
        }
        let objType = obj.id.type;

        if (comp.landType == 2 && position2DList.length <= 2) {
          comp.$message.warning("线至少2个点");
          return;
        }
        if (comp.landType == 3 && position2DList.length <= 3) {
          comp.$message.warning("面至少3个点");
          return;
        }
        if (objType == "EditVertex") {
          position3DList.splice(obj.id.vertexIndex, 1);

          position2DList = [];
          position3DList.forEach((point) => {
            const newPoint = CesiumUtil.cartesian3ToLatLng(point);
            position2DList.push(newPoint);
          });

          comp.clearAllEditVertex();
          comp.createEditVertex();
          comp.createMidVertex();
          if (comp.landType == 2) {
            comp.landBufferChange();
          }
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // ! 初始化
    initialize() {
      drawLayer?.entities.removeAll();
      drawLayer?.entities.removeAll();
      ticketMoveLayer.entities?.removeAll();
      bufferLayer?.entities.removeAll();
      movePosition2D = [];
      movePosition3D = [];
      position2DList = [];
      position3DList = [];

      this.formData = {
        isBelow120Flag: this.formData.isBelow120Flag,
        plot_name: "",
        radius: 50,
        girth: "",
        aim: this.formData.aim,
        district: "",
        description: "",
      };
      this.centerPoint = [];
    },
    // 上一步
    landBack() {
      this.drawEndLand();
    },
    // 下一步
    nextLand() {
      if (position2DList.length == 0) {
        this.$message.warning("请绘制地块");
        return;
      }
      let points = [];
      if (this.landType == 1) {
        points = [position2DList[0]];
      } else if (this.landType == 2) {
        points = position2DList;
      } else if (this.landType == 3) {
        points = [...position2DList, position2DList[0]];
      }
      points = points.map((point) => {
        return [point[0], point[1]];
      });

      // 场景设置
      let AIFlag = 0;
      if (this.sceneSwitch1) {
        AIFlag = 4;
      } else {
        if (this.sceneSwitch2) {
          switch (this.sceneRadio) {
            case 1:
              AIFlag = this.sceneSwitch3 ? 6 : 1;
              break;
            case 2:
              AIFlag = this.sceneSwitch3 ? 7 : 2;
              break;
            case 3:
              AIFlag = this.sceneSwitch3 ? 8 : 3;
              break;

            default:
              if (this.sceneSwitch3) {
                AIFlag = 5;
              } else {
                AIFlag = 0;
              }
              break;
          }
        } else {
          if (this.sceneSwitch3) {
            AIFlag = 5;
          } else {
            AIFlag = 0;
          }
        }
      }

      if (this.formData.ai_flag != AIFlag) {
        this.ifScene = true;
        this.formData.ai_flag = AIFlag;
      }
      // if (this.landType == 4) {
      //   AIFlag = 0;
      // }

      let schedule = null;
      if (this.formData.ifRightNow == 0) {
        schedule = {
          start_date: this.formData2.start_date, // 开始日期
          end_day: this.formData2.end_day, // 终止日期
          repeat_frequency: this.repeat_frequency, // 重复频率
          frequency: {
            repeat_cycle_interval: this.repeat_cycle_interval, // 执行频率
            repeat_cycle: this.repeat_cycle, // 频率单位
            repeat_day: this.repeat_day,
          },
          fly_period:
            this.formData2.fly_period == 999 ? null : this.formData2.fly_period, // 巡检时间段
          fly_time: this.formData2.fly_period == 999 ? this.flyPeriodTip : "", // 自定义时间
          reschedule: this.reschedule, // 接受当日补飞
        };
        // 非指定频率清空设置
        if (schedule.repeat_frequency != "FREQUENCY") {
          schedule.frequency = null;
        }
      }

      let initParams = {
        task_name: this.formData.plot_name,
        plot_shape: "" + this.landType,
        points: points,
        radius: this.formData.radius,
        aim: +this.formData.aim,
        right_now: +this.formData.ifRightNow,
        description: this.formData.description,
        ai_flag: AIFlag,
        // 面状
        minDemAbove: +this.minDemAbove,
        schedule: schedule, // 备注
        multi_nest: "1",
      };
      this.$parent.listLoading = true;
      this.$parent.listLoadingText = "绘制航线中";
      initAirline(initParams)
        .then((res) => {
          console.log("initAirline", res);
          if (
            res.data == "no_model_base" ||
            res.msg == "无人机与地面的高度差超过300米，失败"
          ) {
            this.minDemAbove = 0;
            this.demDialogVisible = true;
            return;
          }
          if (res.error_code == 0) {
            this.airlineList = res.data;
            this.ticketNavChange(3);
          }
        })
        .finally(() => {
          this.$parent.listLoading = false;
          this.$parent.listLoadingText = "";
        });
    },

    airlineSelectChange(airline) {
      this.airlineSelect = airline;
      this.airlines = airline.airlines;
      this.initKey = airline.init_key;
      this.airlineNest = airline.nest;
      this.airlineNestCode = this.airlineNest?.nest_code;
      if (airline.schedule_conflict == true) {
        this.$message.warning(airline.schedule_msg);
      }
      // this.airlines.forEach((line) => {
      //   line.nest = this.nestList.find((nest) => {
      //     return nest.nest_code == line.nestInfo.fs_id;
      //   });
      // });
      console.log("airlines", this.airlines);
      this.initAirlineLayer();
    },
    // 绘制航线
    initAirlineLayer() {
      addAirlineLayer?.entities.removeAll();
      let that = this;
      that.airlines.forEach((airline, index) => {
        let nest = airline.nestInfo;
        let nestPosition = [nest.longitude, nest.latitude, nest.altitude];
        console.log("airline", airline);
        airline.lineListInfo.forEach((line) => {
          let linePoint = [];
          let linePosition = [];
          line.linePointsList.forEach((point) => {
            let newPoint = [
              point.location[1],
              point.location[0],
              point.location[2],
            ];
            newPoint[2] += nestPosition[2];
            linePoint.push(newPoint);
            linePosition.push(...newPoint);
          });

          let startDashLineObj = {
            name: "开始一段",
            type: "airlineStart",
            id: nest.nest_id + index + "开始",
            isheight: true,
            color: "#fff",
            positions: [
              ...nestPosition,
              nestPosition[0],
              nestPosition[1],
              nestPosition[2] > linePoint[0][2]
                ? nestPosition[2]
                : linePoint[0][2],
              ...linePoint[0],
            ],
          };
          console.log("startDashLineObj", startDashLineObj);
          CesiumUtil.AddDashLine(startDashLineObj, addAirlineLayer);
          let endDashLineObj = {
            name: "结束一段",
            type: "airlineEnd",
            id: nest.nest_id + index + "结束",
            isheight: true,
            color: "#eee",
            positions: [
              ...linePoint[linePoint.length - 1],
              nestPosition[0],
              nestPosition[1],

              nestPosition[2] > linePoint[linePoint.length - 1][2]
                ? nestPosition[2]
                : linePoint[linePoint.length - 1][2],
              ...nestPosition,
            ],
          };
          CesiumUtil.AddDashLine(endDashLineObj, addAirlineLayer);

          var airlineOption = {
            type: "airline",
            positions: linePosition,
            color: "#1cc1ff",
            isheight: true,
          };
          console.log("airlineOption", airlineOption);
          CesiumUtil.AddLine(airlineOption, addAirlineLayer);
        });
      });

      let pointOption = {};
      let ellipseOption = {};
      let lineOption = {};
      let polygonOption = {};
      switch (that.landType) {
        case 1:
          // 点
          pointOption = {
            name: "地块点1",
            type: "airlinePointCenter",
          };
          CesiumUtil.drawPoint(
            position3DList[0],
            addAirlineLandLayer,
            pointOption
          );

          ellipseOption = {
            name: "地块点圆",
            type: "airlineEllipse",
            radius: that.formData.radius,
            color: "#00ffff",
          };
          CesiumUtil.drawEllipse(
            position3DList[0],
            addAirlineLandLayer,
            ellipseOption
          );

          break;
        case 2:
          // 线
          lineOption = { name: "线地块", type: "drawLine" };
          CesiumUtil.drawPolyline(
            position3DList,
            addAirlineLandLayer,
            lineOption
          );

          centerPoint = turf.center(turf.points(position2DList));
          this.centerPoint = centerPoint.geometry.coordinates;
          break;
        case 3:
          // 面
          lineOption = { name: "面地块线", type: "airlineLine" };
          CesiumUtil.drawPolyline(
            position3DList[0],
            addAirlineLandLayer,
            lineOption
          );

          polygonOption = {
            name: "面地块",
            type: "airlinePolygon",
            color: "#0000FF",
          };
          CesiumUtil.drawPolygon(
            position3DList,
            addAirlineLandLayer,
            polygonOption
          );

          centerPoint = turf.center(turf.points(position2DList));
          this.centerPoint = centerPoint.geometry.coordinates;
          break;

        default:
          break;
      }
      viewer.flyTo(addAirlineLayer);
    },

    // 取消任务
    ticketCancel() {
      this.$emit("boxStatusChange", 1);
    },
    // 提交任务
    ticketSubmit() {
      this.$parent.listLoading = true;
      this.$parent.listLoadingText = "提交航线中";
      submitTicket({ init_key: this.initKey }).then((res) => {
        console.log("res", res);
        if (res.error_code == 0 && res.msg == "ok") {
          this.$parent.listLoading = false;
          this.$parent.listLoadingText = "";

          this.$parent.$refs.TicketList.getTicketList();
          this.$emit("boxStatusChange", 1);
        } else {
          this.$message.warning(res.msg);
          this.$parent.listLoading = false;
          this.$parent.listLoadingText = "";
        }
      });
    },
    // 打开条例
    openRegulations() {
      this.dialogRegulationsShow = true;
    },
    // 关闭条例
    closeRegulations() {
      this.dialogRegulationsShow = false;
    },

    // ? 创建编辑节点
    createEditVertex() {
      var positions = position3DList;
      // 生成编辑点
      pointsId = [];
      for (var i = 0; i < positions.length; i++) {
        const pointOption = {
          name: "编辑点",
          type: "EditVertex",
          vertexIndex: i,
        };
        const point = CesiumUtil.drawPoint(
          positions[i],
          editLayer,
          pointOption
        );
        // 保存点的ID以便删除
        pointsId.push(point.id);
      }
    },
    // ? 两个点中间的点
    createMidVertex() {
      var positions = position3DList;
      centerPointsId = [];
      for (var i = 0; i < positions.length; i++) {
        var cartographic = Cesium.Cartographic.fromCartesian(
          positions[i],
          viewer.scene.globe.ellipsoid,
          new Cesium.Cartographic()
        );
        positions[i].Longitude = Cesium.Math.toDegrees(cartographic.longitude);
        positions[i].Latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var point = null;
        if (i != positions.length - 1) {
          var cartographic2 = Cesium.Cartographic.fromCartesian(
            positions[i + 1],
            viewer.scene.globe.ellipsoid,
            new Cesium.Cartographic()
          );
          positions[i + 1].Longitude = Cesium.Math.toDegrees(
            cartographic2.longitude
          );
          positions[i + 1].Latitude = Cesium.Math.toDegrees(
            cartographic2.latitude
          );
          point = this.getNewRollPoint(positions[i], positions[i + 1]);
        } else if (i == positions.length - 1 && this.landType == 3) {
          point = this.getNewRollPoint(positions[i], positions[0]);
        }
        if (point) {
          const pointOption = {
            name: "新增编辑点",
            type: "EditMidVertex",
            vertexIndex: i,
            color: Cesium.Color.WHITE,
            pixelSize: 7,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 2,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          };
          const entities = CesiumUtil.drawPoint(
            Cesium.Cartesian3.fromDegrees(point[0], point[1]),
            editLayer,
            pointOption
          );
          centerPointsId.push(entities.id);
        }
      }
    },
    // ? 求两个点的中点 经纬度
    getNewRollPoint(a, b) {
      var len =
        Math.sqrt(
          (a.Longitude - b.Longitude) * (a.Longitude - b.Longitude) +
            (a.Latitude - b.Latitude) * (a.Latitude - b.Latitude)
        ) / 2;
      var r = Math.sqrt(
        (a.Longitude - b.Longitude) * (a.Longitude - b.Longitude) +
          (a.Latitude - b.Latitude) * (a.Latitude - b.Latitude)
      );
      var cx = (len * (b.Longitude - a.Longitude)) / r + a.Longitude;
      var cy = (len * (b.Latitude - a.Latitude)) / r + a.Latitude;
      return [cx, cy];
    },
    // ? 清空两个点的中心点
    clearMidVertex() {
      for (var i = 0; i < centerPointsId.length; i++) {
        editLayer.entities.removeById(centerPointsId[i]);
      }
    },
    // ? 清除所有编辑点位
    clearAllEditVertex() {
      for (var i = 0; i < centerPointsId.length; i++) {
        editLayer.entities.removeById(centerPointsId[i]);
      }
      for (var i = 0; i < pointsId.length; i++) {
        editLayer.entities.removeById(pointsId[i]);
      }
    },

    // 重复频率选项是否禁用
    repeatFrequencyOptionDisabled(val) {
      let key = val.value;
      let aim = this.formData.aim;
      // 是否为全覆盖
      if (aim == 3) {
        if (key == 2) {
          return false;
        } else {
          return true;
        }
      }
    },
    // 巡检时段选项是否禁用
    flyPeriodOptionDisabled(val) {
      let key = val.key;
      let aim = this.formData.aim;
      // 是否为全覆盖
      if (aim == 3) {
        if (key == 1) {
          return false;
        } else {
          return true;
        }
      }

      // 是否为连续执行
      if (this.formData2.repeatFrequency == 2) {
        // 是否为三维/正射
        if (aim == 5 || aim == 6) {
          if (key == 1) {
            return false;
          } else {
            return true;
          }
        } else {
          if (key == 1 || key == 4 || key == 5 || key == 6) {
            return false;
          } else {
            return true;
          }
        }
      } else {
        // 是否为三维/正射
        if (aim == 5 || aim == 6) {
          if (key == 1 || key == 2 || key == 3) {
            return false;
          } else {
            return true;
          }
        } else {
          return false;
        }
      }
    },

    // 重复频率更改
    repeatFrequencyChange(val) {
      this.ifSchedule = true;
      // 当天 星期 日期
      this.repeatDialogWeekDay = moment().day();
      this.repeatDialogMonthDay = +moment().format("DD");

      // 记录
      if (val !== 7) {
        this.lastRepeatFrequencyData = val;
      }
      switch (val) {
        case 1:
          // ! 不重复 ↓
          this.repeat_frequency = "NO_REPEAT";
          this.repeat_cycle = "";
          this.repeat_cycle_interval = 0;
          this.repeat_day = [];

          this.repeatFrequencyTip = "";

          this.formData2.end_day = this.formData2.start_date;

          break;
        case 2:
          // ! 连续执行 ↓
          this.formData2.fly_period = 1;
          this.flyPeriodChange(1);
          this.repeat_frequency = "CONTINUATION";
          this.repeat_cycle = "DAY";
          this.repeat_cycle_interval = 0;
          this.repeat_day = [];

          this.repeatFrequencyTip = "连续执行";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;
        case 3:
          // ! 每天一次 ↓
          this.repeat_frequency = "FREQUENCY";
          this.repeat_cycle = "DAY";
          this.repeat_cycle_interval = 1;
          this.repeat_day = [];

          this.repeatFrequencyTip = "每天一次";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;
        case 4:
          // ! 每周一次 ↓
          this.repeat_frequency = "FREQUENCY";
          this.repeat_cycle = "WEEK";
          this.repeat_cycle_interval = 1;
          this.repeat_day = [
            this.repeatDialogWeekDay ? this.repeatDialogWeekDay : 7,
          ];

          this.repeatFrequencyTip = "每周一次";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;
        case 5:
          // ! 每月一次 ↓
          this.repeat_frequency = "FREQUENCY";
          this.repeat_cycle = "MONTH";
          this.repeat_cycle_interval = 1;
          this.repeat_day = [this.repeatDialogMonthDay];

          this.repeatFrequencyTip = "每月一次";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;
        case 6:
          // ! 每个非工作日重复 休息日 周六周日 ↓
          this.repeat_frequency = "FREQUENCY";
          this.repeat_cycle = "WEEK";
          this.repeat_cycle_interval = 1;
          this.repeat_day = [6, 7];

          this.repeatFrequencyTip = "每个非工作日重复";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;
        case 7:
          // ! 自定义频率 ↓

          this.scheduleTypeDialogShow = true;
          this.repeat_frequency = "FREQUENCY";

          this.formData2.end_day = moment(this.formData2.start_date)
            .add(30, "day")
            .format("YYYY-MM-DD");
          break;

        default:
          this.repeat_frequency = "";
          break;
      }
    },
    // 巡检时段变更
    flyPeriodChange(val) {
      this.ifSchedule = true;
      // 记录
      if (val != 999) {
        this.lastFlyPeriodData = val;
        this.flyPeriodTip = this.flyPeriodOption[val - 1].value;
      } else {
        this.flyPeriodDialogShow = true;
      }
    },
    // 开始日期更改
    startDateChange(val) {
      this.ifSchedule = true;
      if (
        moment(this.formData2.start_date).diff(moment(this.formData2.end_day)) >
        0
      ) {
        this.formData2.end_day = this.formData2.start_date;
      }
    },
    // 结束日期更改
    endDateChange(val) {
      this.ifSchedule = true;
    },

    // 实时识别变更
    aiFlagChange(val) {
      if (this.sceneRadio == val) {
        this.sceneRadio = 0;
      } else {
        this.sceneRadio = val;
      }
    },

    // ! 弹框
    // 自定义时间
    //  自定义时间1变化
    flyTime1Change(val) {
      if (val == 23 && this.flyTime2 > 50) {
        this.flyTime2 = 50;
      }
    },
    // 确定
    flyPeriodDialogSubmit() {
      this.lastFlyPeriodData = 999;
      if (this.flyTime1 == 23 && this.flyTime2 > 50) {
        this.$message.warning("请选择在 0:00--23:50 之间");
        return;
      }
      this.flyPeriodTip =
        this.flyTime1 +
        ":" +
        (this.flyTime2 >= 10 ? this.flyTime2 : "0" + this.flyTime2);
      this.flyPeriodDialogShow = false;
    },
    // 关闭
    flyPeriodDialogClose() {
      this.formData2.fly_period = this.lastFlyPeriodData;
      this.flyPeriodDialogShow = false;
    },
    // 自定义频率

    // 计算执行几次
    scheduleNumMethod() {
      switch (this.repeatDialogSelect) {
        case "DAY":
          return 1;
        case "WEEK":
          return this.repeatDialogWeekSelectList.length;
        case "MONTH":
          return this.repeatDialogMonthSelectList.length;

        default:
          break;
      }
    },
    // 下拉数据变更
    repeatDialogSelectChange(val) {
      switch (val) {
        case "DAY":
          // ? 天
          this.repeatDialogMin = 1;
          this.repeatDialogMax = 90;
          break;

        case "WEEK":
          // ? 周
          this.repeatDialogMin = 1;
          this.repeatDialogMax = 12;
          this.repeatDialogWeekSelectList = [this.repeatDialogWeekDay];
          break;

        case "MONTH":
          // ?  月
          this.repeatDialogMin = 1;
          this.repeatDialogMax = 3;
          this.repeatDialogMonthSelectList = [this.repeatDialogMonthDay];
          break;

        default:
          break;
      }
      this.repeat_cycle_interval =
        this.repeat_cycle_interval < this.repeatDialogMax
          ? this.repeat_cycle_interval
          : this.repeatDialogMax;
    },
    // ? 周 选中
    repeatDialogWeekSelect(item) {
      if (this.repeatDialogWeekSelectList.includes(item)) {
        this.repeatDialogWeekSelectList =
          this.repeatDialogWeekSelectList.filter((e) => {
            return e !== item;
          });
      } else {
        this.repeatDialogWeekSelectList.push(item);
      }
    },
    // ? 月 选中
    repeatDialogMonthSelect(item) {
      if (this.repeatDialogMonthSelectList.includes(item)) {
        this.repeatDialogMonthSelectList =
          this.repeatDialogMonthSelectList.filter((e) => {
            return e !== item;
          });
      } else {
        this.repeatDialogMonthSelectList.push(item);
      }
    },
    // 确定
    scheduleTypeDialogSubmit() {
      this.lastRepeatFrequencyData = 7;
      this.repeat_cycle = this.repeatDialogSelect;

      if (!this.repeatDialogSelect) {
        this.$message.warning("请选择重复类型");
        return;
      }
      if (!this.repeat_cycle_interval) {
        this.$message.warning("请输入重复频率");
        return;
      }

      let day =
        this.repeat_cycle_interval == 1 ? "" : this.repeat_cycle_interval;
      switch (this.repeatDialogSelect) {
        case "DAY":
          // 天
          this.repeat_day = [];
          this.repeatFrequencyTip = `每${day}天`;

          break;
        case "WEEK":
          // 周

          if (!this.repeatDialogWeekSelectList?.length) {
            this.$message.warning("请选择重复星期");
            return;
          }

          this.repeat_day = [
            ...new Set(this.repeatDialogWeekSelectList.sort()),
          ];

          const weekArray = ["一", "二", "三", "四", "五", "六", "日"];
          const newWeek = [];
          this.repeat_day.forEach((item, index) => {
            newWeek.push(weekArray[item - 1]);
          });

          this.repeatFrequencyTip = `每${day}周 ${newWeek.join("、")}`;
          break;
        case "MONTH":
          // 月

          if (!this.repeatDialogMonthSelectList?.length) {
            this.$message.warning("请选择重复日期");
            return;
          }
          this.repeat_day = [
            ...new Set(
              this.repeatDialogMonthSelectList.sort((old, New) => {
                return old - New;
              })
            ),
          ];

          this.repeatFrequencyTip = `每${day}月 ${this.repeat_day.join("、")}`;
          break;

        default:
          break;
      }
      this.scheduleTypeDialogShow = false;
    },
    // 关闭
    scheduleTypeDialogClose() {
      this.repeatFrequencyChange(this.lastRepeatFrequencyData);
      this.formData2.repeatFrequency = this.lastRepeatFrequencyData;
      this.scheduleTypeDialogShow = false;
    },

    // 关闭最低高度
    demDialogClose() {
      this.minDemAbove = 0;
      this.demDialogVisible = false;
    },
    demDialogSubmit() {
      if (this.minDemAbove < 80) {
        this.$message.warning("高度不得低于80");
        return;
      }
      this.demDialogVisible = false;
      this.nextLand();
    },
    demDialogHeightChange() {
      if (this.demHeightVisible) {
        this.demDialogHeight = 204;
        this.demHeightVisible = false;
      } else {
        this.demDialogHeight = 272;
        this.demHeightVisible = true;
      }
    },
  },
  watch: {},
  beforeDestroy() {
    this.clearLand();
    this.removeAllAction();
  },
};
</script>

<style lang="scss" scoped>
$borderColor: #cccccc70;
$shadowColor: #cccccc80;
$formRight: 24px;
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
$color1: #18abf3;
.el-form ::v-deep {
  .el-form-item {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    .el-form-item__label {
      min-width: 70px;
      text-align: start;
      color: #fff;
      font-weight: normal;
      font-size: 12px;
    }
    .el-form-item__content {
      flex: 1;
      text-align: start;
      display: flex;
      padding-right: 15px;
    }
    .el-input {
      flex: 1;
      .el-input__inner {
        line-height: 200px;
        width: 100%;
        background-color: #ffffff00;
        border-color: $color1;
        color: $color1;
      }
      &.plotNameInput {
        .el-input__inner {
          padding-right: 45px;
        }
        .el-input__count-inner {
          background-color: #ffffff00;
          color: $color1;
        }
      }
      &.is-disabled {
        .el-input__inner {
          background-color: #314754;
        }
      }
      .el-input-group__append {
        background-color: #ffffff00;
        border-color: $color1;
        color: $color1;
        padding: 0 5px;
      }
    }
    .el-textarea {
      .el-textarea__inner {
        background-color: #ffffff00;
        border-color: $color1;
        color: $color1;
      }
      &.textareaOverflow {
        .el-textarea__inner {
          padding-bottom: 20px;
        }
      }
      &.is-disabled {
        .el-textarea__inner {
          background-color: #314754;
        }
      }
      .el-input__count {
        background-color: #ffffff00;
        border-color: $color1;
        color: $color1;
        height: 20px;
        line-height: 20px;
      }
    }
    .el-slider {
      width: 90%;
      .el-slider__runway {
        width: 80%;
      }
      .el-slider__input {
        width: 40px;
        .el-input {
          .el-input__inner {
            padding: 0;
          }
        }
      }
    }
    &.is-error {
      margin-bottom: 22px;
    }
    &.contentOverFlow {
      .el-form-item__content {
        padding-right: 0;
      }
    }
  }
}
.ticketAddBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .landType {
    position: absolute;
    left: -47px;
    top: 25px;
    display: flex;
    flex-direction: column;
    .landSvg {
      padding: 10px;
      color: #009dd9;
      background-color: #263445;
      position: relative;
      cursor: pointer;
      &:hover {
        background-color: #15264d;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          border: 6px solid #00000000;
          border-left-color: #0951da;
          border-bottom-color: #0951da;
        }
      }
      &.selectedSvg {
        background-color: #15264d;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          border: 6px solid #00000000;
          border-left-color: #0951da;
          border-bottom-color: #0951da;
        }
      }
    }
  }
  .landTip {
    position: absolute;
    right: vw(360);
    top: 30px;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 13px;
    .tipText {
      width: 250px;
      background-color: #fff;
      border-radius: 5px;
      padding: 0 5px;
      margin-right: 5px;
      height: 30px;
      line-height: 30px;
    }
    .tipButton {
      display: flex;
      height: 30px;
      line-height: 30px;
      .tipAffirm {
        background-color: #31a8ff;
        color: #fff;
        padding: 0 5px;
        border-radius: 5px 0 0 5px;
        cursor: pointer;
      }
      .tipCancel {
        background-color: #fff;
        color: #000;
        padding: 0 5px;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
      }
    }
  }
  .ticket_add_Header {
    text-align: left;
    width: 100%;
    height: vh(20);
    margin: vh(5) auto;
    line-height: vh(20);
    font-size: 14px;
    color: white;

    display: flex;
    justify-content: space-between;
  }
  .ticket_title_content {
    background-image: url("~@/assets/box_title_back1.png");
    background-size: 100% 100%;
    text-align: left;
    width: 100%;
    height: vh(30);
    margin: vh(5) auto;
    line-height: vh(30);
    font-size: 14px;
    color: white;
    padding: 0px 10px;

    display: flex;
    justify-content: space-between;
  }
  .ticket_add {
    flex: 1;
    max-height: vh(850);
    overflow: auto;

    .contentText {
      color: $color1;
      font-size: 12px;
      margin-left: 5px;
    }

    .ticket_add_body {
      &.airLineLand {
        .airlineHeight {
          display: flex;
          align-items: center;
          .svg-icon {
            margin-left: 5px;
          }
          .el-switch {
            scale: 0.7;
          }
        }
      }
      &.airLineUse {
        margin-bottom: 10px;
        .el-select {
          width: 100%;
        }
        .el-date-picker {
          width: 100%;
        }
        .timeTip {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          width: 100%;
          text-align: left;
          padding-left: 75px;
        }
      }
      &.secneSetting {
        .el-radio {
          color: #fff;
        }
      }
    }
  }
  .ticket_show {
    flex: 1;
    max-height: vh(850);
    overflow: auto;
    ::v-deep .el-form-item__content {
      line-height: 20px;
    }
    .airlineNest {
      display: flex;
      flex-direction: column;
      border: $color1 solid 1px;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      .airlineNestInfo {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-bottom: 20px;
      }
      .airlineInfo {
        display: flex;
        .airlineContent {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: start;
        }
      }
      .airlineTitle {
        margin-bottom: 5px;
      }
      .airlineText {
      }
    }
  }
  .ticket_add_footer ::v-deep {
    min-height: vh(50);
    display: flex;
    margin: 5px;

    .el-button {
      width: 100%;
      height: 40px;
    }

    .buttonCancel {
      flex: 1;
      margin-right: 10px;

      .el-button {
        background-color: transparent;
        color: #ccc;
        border: 1px solid #ccc;
      }
    }

    .buttonSubmit {
      flex: 3;
      display: flex;
      justify-content: space-evenly;
    }
  }
}
.el-dialog {
  .height_dialog_title {
    font-weight: 700;
    font-size: 15px;
    text-align: center;
  }
  .height_dialog_text {
  }
  .height_dialog_tip {
    cursor: pointer;
    color: #169bd5;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 5px;
  }
  .height_dialog_button {
    text-align: center;
  }
}
.height_tip {
  width: 200px;
  font-size: 12px;
}

.flyPeriodDialog {
  border-radius: 10px;
  overflow: auto;

  .el-dialog__header {
    border-bottom: 1px solid $borderColor;
  }

  .el-dialog__body {
    position: relative;
    padding-bottom: 0;

    .flyPeriodDialogBody {
      .bodyTime {
        display: flex;
        justify-content: space-evenly;
        position: relative;

        .flyPeriodDialogTip {
          position: absolute;
          bottom: 0;
          left: 5%;
          font-size: 10px;
          color: #f00;
        }

        .timeContent {
          display: flex;
          align-items: center;
          padding: 20px 0px;

          .el-select {
            width: 100px;
            margin-right: 5px;
          }
        }
      }

      .flyPeriodDialogCheck {
        padding: 10px 40px;
      }

      .bodyTip {
        position: absolute;
        font-size: 10px;
        top: 5px;
        left: 10px;
      }
    }
  }

  .el-dialog__footer {
  }
}
::v-deep.scheduleTypeDialog {
  .el-dialog__header {
    border-bottom: 1px solid $borderColor;
  }

  .el-dialog__body {
    .scheduleTypeDialogBody {
      .header {
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .title {
          font-size: 14px;
          color: #999;
          margin-right: 20px;
        }

        .content {
          display: flex;
          align-items: center;

          .text {
            margin-right: 5px;
          }

          .number {
            margin-right: 5px;

            .el-input-number {
              width: 70px;

              .el-input__inner {
                padding: 0;
                padding-right: 27px;
                background-color: #fff;
                border: 1px solid $borderColor !important;
                border-radius: 5px;
              }

              .el-input-number__decrease {
                background-color: #fff;
              }

              .el-input-number__increase {
                background-color: #fff;
              }
            }
          }

          .select {
            .el-select {
              width: 100px;

              .el-input__inner {
                padding: 0;
                padding-left: 5px;
                background-color: #fff;
                border: 1px solid $borderColor !important;
                border-radius: 5px;
              }
            }
          }

          .scheduleNum {
            margin-left: 5px;

            .number {
              color: #37a1fb;
            }
          }
        }
      }

      .body {
        height: 150px;
        margin-top: 10px;

        .bodyTips {
          color: #ccc;
          margin-top: 5px;
          font-size: 12px;
        }

        .week {
          display: flex;
          justify-content: center;

          .day {
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;

            &.selectDay {
              background-color: #0087fb;
              color: #fff;
            }
          }
        }

        .month {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          padding: 0 5px;

          .day {
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #ccc;
            margin: 5px;
            cursor: pointer;

            &.selectDay {
              background-color: #0087fb;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .el-dialog__footer {
    border-top: 1px solid $borderColor;
  }
}

.demDialog {
  .demDialogBody {
    display: flex;
    .demSvgBox {
      .svg-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
    .demDialogContent {
      flex: 1;
      .bodyContentTitle {
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 16px;
        color: #1d1d1f;
      }
      .bodyContentText {
        margin-top: 8px;
        color: #1d1d1f;
        font-size: 14px;
        font-face: PingFangSC;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 22px;
        .textSetting {
          color: #0271e3;
          cursor: pointer;
        }
      }
      .bodyContentHeight {
        margin-top: 24px;
        display: flex;
        align-items: center;
        .heightTitle {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 14px;
          color: #1d1d1f;
          text-align: right;
        }
        .svg-icon {
          width: 16px;
          height: 16px;
          opacity: 0.3;
          margin-left: 4px;
          margin-right: 8px;
        }
        .heightInput {
          flex: 1;
          display: flex;
          .el-input ::v-deep {
            width: 200px;
            height: 36px;
            .el-input__inner {
              width: 100%;
              height: 100%;
              background: #0000000a;
              border-radius: 10px 0 0 10px;
            }
          }
          .heightInputText {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: #0000000a;
            border-radius: 0 10px 10px 0;
            color: #000;
            border-left: 1px solid #0000000b;
          }
        }
      }
    }
  }
  .demDialogFooter {
    .demButtonClean {
      width: 92px;
      height: 40px;
      background: #e2e2e4;
      border-radius: 100px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #1d1d1f;
      text-align: center;
    }
    .demButtonSubmit {
      width: 92px;
      height: 40px;
      background: #f45050;
      border-radius: 100px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.dialog_height {
  .el-dialog__body {
    padding-top: 10px;
  }
}
.timeTipTooltip {
  width: 150px;
  padding: 5px;
  background-color: skyblue;
}
</style>
